<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dashboard</title>
  <link rel="stylesheet" href="https://unpkg.com/@ionic/core/css/ionic.bundle.css"/>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
      display: flex;
      justify-content: space-between;
    }

    quake-render {
      padding: 2em;
    }

    #transflow-nav a {
      display: block;
      font-size: 16px;
    }

    #navigator button,
    #navigator a {
      cursor: pointer;
      display: block;
      font-size: 16px;
      text-decoration: none;
      padding: 8px 0;
    }

    #knowledge-type .entry-type {
      margin: 0;
      padding: 8px 0;
    }

    /* todo: add support for svg */
    .ProseMirror .image img {
      min-width: 320px;
    }

    #navigator {
      width: 15%;
      min-width: 200px;
      border-right: #ddd 1px solid;
      overflow: scroll;
      padding-left: 20px;
    }

    #navigator h3 {
      font-size: 16px;
      padding: 8px 0;
      color: #00000073;
    }

    ion-card {
      max-width: 280px;
    }

    #navigator h3:after {
      content: "";
      position: relative;
      top: 12px;
      display: block;
      height: 1px;
      background: rgba(0, 0, 0, .06);
    }

    #outlet {
      width: 85%;
      height: 100%;
      overflow: scroll;
    }

    .quake-home_button {
      font-size: 16px;
      background: none;
      text-decoration: underline;
      color: #3880ff;
    }
  </style>
</head>
<body>
<div id="navigator">
  <div>
    <h3>Quake</h3>
    <button class="quake-home_button" onclick="Quake.Router.go('/')">Home</button>
  </div>
  <div>
    <h3>Transflow</h3>
    <div id="transflow-nav"></div>
  </div>
  <div>
    <h3>Creative</h3>
    <button class="quake-home_button" onclick="Quake.Router.go('/quake/board')">Board</button>
  </div>

  <div>
    <h3>by Types</h3>
    <div id="knowledge-type"></div>
  </div>

  <div>
    <h3>Config</h3>
    <button class="quake-home_button" onclick="Quake.Router.go('/quake/creator')">Type Creator</button>
  </div>
</div>
<quake-kbar></quake-kbar>
<div id="outlet"></div>
</body>

<!--ionic for ui-->
<script type="module" src="https://unpkg.com/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/core/dist/ionic/ionic.js"></script>

<!--vaadin router-->
<script src="https://unpkg.com/@vaadin/router/dist/vaadin-router.umd.min.js"></script>

<!--search engine-->
<script src="https://unpkg.com/meilisearch@latest/dist/bundles/meilisearch.umd.js"></script>

<!--ionic-icons-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<!-- By Stencil.js -->
<script type="module" src="./dashboard/dist/dashboard/dashboard.esm.js"></script>
<script type="module" src="./quake-render/dist/quake-render/quake-render.esm.js"></script>
<script type="module" src="./type-creator/dist/type-creator/type-creator.esm.js"></script>

<!-- by React Frameworks -->
<script src="./quake-editor/build/static/quake-editor.min.js"></script>

<!-- calendar styles -->
<link rel="stylesheet" href="packages/calendar/build/static/quake-calendar.min.css">
<script src="./packages/calendar/build/static/quake-calendar.min.js"></script>

<!-- timeline styles -->
<link rel="stylesheet" href="packages/timeline/build/static/quake-timeline.min.css">
<script src="./packages/timeline/build/static/quake-timeline.min.js"></script>

<script src="https://unpkg.com/pdfjs-dist@2.10.377/build/pdf.worker.min.js"></script>
<!-- Viewer styles -->
<link rel="stylesheet" href="packages/quake-viewer/build/static/quake-viewer.min.css">
<script src="./packages/quake-viewer/build/static/quake-viewer.min.js"></script>

<!-- React - Whiteboard -->
<link rel="stylesheet" href="quake-board/build/static/quake-board.min.css">
<script src="quake-board/build/static/quake-board.min.js"></script>

<script src="app.js"></script>
<script src="transflow.lib.js"></script>
<!-- saved transflow-scripts-->
<script src="/transflow/script/gen_code.js"></script>
<script src="/transflow/script/custom_transfuncs.js"></script>
<script src="quake-kbar/build/static/quake-kbar.min.js"></script>

</html>
